<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        //Promise:es6提出的新概念,用来解决异步问题
        // 特点: 将异步任务状态和结果分离开马，可以随时调用异步结果，
        // 一旦结果确定,无法取消
        // 状态:挂起:pending, 成功:resolve, 失败:reject


        // 创建Promise实例对象时,必须传递参数
        // Promise 的实参是一个函数,这个函数还有两个参数res,rej
        // res(参数1是用来返回运行成功的结果)
        // rej(参数2是用来返回运行失败的结果)也是函数
        var p = new Promise(function(res, rej){
            setTimeout(function(){
                if(Math.random() > 0.5){
                    //从挂起状态更改为成功的状态时调用res()函数
                    res("成功了")
                }else{
                    //从挂起状况更改为失败时调用rej函数
                    rej("失败了")
                }
            },Math.random() * 1000);
        });
        console.log(p);
        // 用来返回Promise异步任务的结果
        // .them会监听Promise状况的更改,当状况更改为成功或失败后,
        // 会执行then的回调函数
        // 可以重复调用Promise异步任务的结果
        // p.then(回调1(){},回调2(){});
        // p.then(function(res){
            // 得到请求成功时返回的结果
            // console.log(res);//"成功了"
        // },function(err)){
        // 失败时返回的结果
        // console.log(err); //"失败了"
        // });


        p.then(function(res){
            console.log("在then中得到成功的返回结果", res);
        }),cath(function(err){
            console.log("在catch中得到失败的返回结果",err);
        })

        var div = document.querySelector("div");
        div.onclick = function(){
            p.then(function(res){
                console.log("在then中得到成功的返回结果",res);
            }).catch(function(err){
                console.log("在catch中得到失败的返回结果",err);
            })
        }
    </script>
</body>
</html>